$base-fontcolor:#008FF1;
$base-backcolor:#F9F9F9;
$normal-color:#666666;
.body{
  //overflow: hidden;
  //position: fixed;
  //position: absolute;
  //height:100%;
}
html,body{
  max-width: 750px ;
  min-width: 320px;
  margin:0 auto;
}
input{
  &::-webkit-input-placeholder{
    color:#C3C3C3;
  }
  &::-moz-placeholder{
    color:#C3C3C3;
  }
  &:-moz-placeholder{
    color:#C3C3C3;
  }
  &:-ms-input-placeholder{
    color: #C3C3C3;
  }
}
body{
  background: $base-backcolor;
}
img{
  display: block;
}
.tab_top{
  display: flex;
  z-index: 10;
  display: -webkit-flex;
  box-shadow: 0 1px 0 0 #E2E2E2;
  padding:.8rem;
  background: white;
  line-height: 2rem;
  margin:.8rem 0 ;
  li{
    box-sizing: border-box;
    width:33.33%;
    text-align: center;
    color: $normal-color;
    font-weight: 600;
    border-right:1px solid rgba(0,0,0,.2);
    .active{
      color:$base-fontcolor;
    }
    &:last-child{
      border:none;
    }
  }
}
.plan-out{
  background: white;
}
.title-plan{
  padding:1.4rem 0;
  width:80%;
  margin:0 auto;
  color:$base-fontcolor;
  font-size: 1.3rem;
  text-align: center;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  span{
    display: inline-block;
    width:30%;
    height:1px;
    background: linear-gradient(-90deg, #008FF1 0%,rgba(0,194,249,0.00) 100%);
    margin-right:1rem;
  }
  .span{
    background: linear-gradient(-90deg, rgba(0,194,249,0.00) 0%, #008FF1 100%);
    margin-left:.5rem;
  }
}
.tab_top1{
  position: fixed;
  width: 100%;
  top:0;
  margin:0;
}
.tips{
  background: white;
  padding:1rem;
  line-height: 2;
  margin-bottom: 1rem;
  span{
    color:$base-fontcolor;
  }
  a{
    color:$base-fontcolor;
  }
}
.tips_show{
  position: fixed;
  top:0;
  height:100%;
  z-index: 100;
  background: white;
  font-size: 1.2rem;
  line-height: 1.8;
  overflow-y:scroll;
  display: none;
}
.tips_show header{
  font-weight: 600;
  color:#000;
  line-height: 4;
  font-size: 1.4rem;
  text-align: center;
  margin-top:4rem;
}
.tips_top{
  position: fixed;
  top:0;
  width:100%;
  background: white;
  height:4rem;
  text-align: center;
  border-bottom:1px solid #ccc;
  line-height: 4;
}
.tips_cont{
  padding:0 1rem 1rem;
  span{
    font-weight: 600;
    color: #333333;
  }
  a{
    color:$base-fontcolor
  }
}
.tips_top i{
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  right:1rem;
  font-style: normal;
  font-size: 2.6rem;
}
.tips_cont .aquare{
  display: inline-block;
  height:1rem;
  width:1rem;
  background: #000;
}
#tips_show3 .tips_cont span{
  font-size: 1.6rem;
  line-height: 2;
  color:$base-fontcolor;
}
.footer{
  display: flex;
  display: -webkit-flex;
  position: fixed;
  bottom:0;
  width: 100%;
  background: white;
  box-shadow: 0 .1rem .1rem .2rem #F9F9F9;
  li{
    display: flex;
    display: -webkit-flex;
    align-items:center;
    justify-content: center;
    height:4rem;
    width:30%;
    color:white;
    font-size: 1.4rem;
    &:first-child{
      width:40%;
      font-weight:600;
      color:$base-fontcolor;
    }
    &:last-child{
      background: $base-fontcolor ;
    }
    &:nth-child(2){
      background: #72CDFF;
    }
    img{
      width:1.7rem;
      margin-right:.2rem;
    }
    a{
      display: flex;
      display: -webkit-flex;
      align-items:center;
      justify-content: center;
      height:4rem;
      color:white;
      width:100%;
    }
  }
}
.article_info{
  background: white;
  padding:1rem;
  padding-bottom:4.3rem;
  line-height: 1.8;
}
.info_title{
  color:#000;
  font-weight: 600;
  margin-bottom:1rem;
  font-size: 1.5rem;
  text-align: center;
}
.info_cont{
  color:#000;
  font-weight: 600;
}
.bottom_out{
  display: flex;
  display: -webkit-flex;
  width:100%;
  position: fixed;
  bottom:0;
  border-top:1px solid #ccc;
  line-height: 4rem;
  text-align: center;
  background: white;
}
.bottom_out div{
  width:50%;
}
.bottom_out div:first-child{
  border-right:1px solid #ccc;
}
.all_no{
  background: $base-fontcolor;
  color:white;
}
.tips2 section{
  padding:1rem;
}
.tips2{
  background: white;
  position: fixed;
  left: 50%;
  top:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width:70%;
  font-family: PingFangSC-Regular;
  font-size: 1rem;
  color: #333333;
  letter-spacing: 0;
  box-shadow:0 0  .3rem rgba(0,0,0,.4);
  border-radius: .3rem;
  line-height: 1.5;
  /*transition: z-index 1s linear;*/
  z-index: 10;
}
.tips2_add{
  z-index: -1;
}
.tips2 .top{
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 1.4rem;
  color: #333333;
  letter-spacing: 0;
  padding:1rem;
}
.bottom_btn{
  line-height: 3rem;
  border-top:1px solid #EEEEEE;
  text-align: center;
  color:#333;
  font-size: 1.1rem;
  margin-top:1rem;
}
.mint-cell-wrapper{
  font-size: 1.2rem;
  background:none;
  border-bottom: 1px solid #E2E2E2;
}
.mint-cell-title{
  width:10rem !important;
}
.u-top{
  height:4rem;
  border-bottom: 1px solid #E2E2E2;
  font-weight: 600;
  color:#333333;
  font-size: 1.2rem;
  line-height: 4rem;
  background: white;
  margin-top:.8rem;
  text-indent: 1rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  span:last-child{
    color:  #666666;
    margin-right:.8rem;
  }
}
//------------------------------------
.tips-out{
  position: relative;
  margin-top:-1rem;
  margin-bottom:1rem;
  .mint-cell-wrapper, .mint-cell:last-child {
    background: none;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0;
    color: #666;
    border: none;
  }
  .mint-cell-wrapper, .mint-cell:last-child {
    background: none;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0;
    color: #666;
    border: none;
  }
  .mint-cell-title {
    text-indent: 1rem;
  }
  .mint-checklist-label {
    padding: 0;
  }
  .mint-cell-value {
    padding-right: .4rem;
  }
  .mint-checkbox-core {
    width: 1rem;
    height: 1rem;
    background: #C3C3C3;
  }
  .mint-checkbox-core:after {
    top: 0px;
    left: 3px;
  }
  .mint-checkbox-input+.mint-checkbox-core:after {
    border-color: #fff;
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  .mint-checkbox-input:checked+.mint-checkbox-core{
    background-color: $base-fontcolor;
    border-color: $base-fontcolor;
  }
  .agree{
    padding-right:1rem;
  }
}

@media screen and (max-width:376px) and (min-width: 321px) {
  .agree{
    position: absolute;
    z-index: 10;
    bottom: -1.3rem;
    left: 2.5rem;
    line-height: 1.4rem;
  }
}
@media screen and  (max-width: 320px) {
  .agree{
    position: absolute;
    z-index: 10;
    bottom: -2.6rem;
    left: 2.5rem;
    line-height: 1.4rem;
  }
}
@media screen and (min-width:377px) {
  .agree{
    position: absolute;
    z-index: 10;
    bottom: -1.6rem;
    left: 2.5rem;
    line-height: 1.4rem;
  }
}
.agree span {
  color: #3CA7EA;
}
.agree a{
  color:#3CA7EA;
}
.cont_out{
  //position: relative;
}
//--------------------------------------------
.makeSure{
  line-height: 3rem;
  color:white;
  text-align: center;
  background: $base-fontcolor ;
  width:100%;
  margin:2rem 0;
}
.pop-up{
  position: fixed;
  display: none;
  top:0;
  left: 0;
  background: #999999;
  width:100%;
  height:100%;
  z-index: 999;
}
.cont-out{
  width: 91%;
  height:96%;
  overflow-y: auto;
  margin:1rem auto;
  padding:1rem;
  box-sizing: border-box;
  background: white;
  border-radius: .4rem;
  font-size: 1.2rem;
  .active{
    border:1px solid  $base-fontcolor !important;
    color: $base-fontcolor !important;
  }
  .two2{
    width: 10rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap: wrap;
    span{
      width:48%;
      border-radius: 6px;
      box-sizing: border-box;
      border:1px solid #D3D3D3;
      margin-bottom: 1rem;
    }
  }
  .three{
    width: 15rem;
    display: flex;
    display: -webkit-flex;
    text-align: center;
    flex-wrap: wrap;
    span{
      width:30%;
      margin-right:.1rem;
      padding:0 10px;
      border-radius: 6px;
      box-sizing: border-box;
      margin-bottom: 1rem;
      border:1px solid #D3D3D3;
    }
  }
  .two{
    width: 15rem;
    display: flex;
    display: -webkit-flex;
    text-align: center;
    flex-wrap: wrap;
    span{
      width:46%;
      margin-right: 1%;
      display: inline-block;
      border-radius: 6px;
      padding:0 10px;
      box-sizing: border-box;
      border:1px solid #D3D3D3;
      margin-bottom: .5rem;
    }
  }
  .title{
    color: #333;
    font-weight:600 ;
    font-size: 1.4rem;
    text-align: center;
    padding:.5rem 0;
    position: relative;
    display: block !important;
    i{
      font-size: 2rem ;
      position: absolute;
      top: .4rem;
      right:.4rem;
    }
  }
  div{
    display:flex;
    display: -webkit-flex;
    align-items: baseline;
    span{
      display: inline-block;
      line-height: 3rem;
    }
    .f-p{
      margin-right:.4rem;
      width: 6rem;
      text-align: justify;
      text-align-last: justify;
      height: 3.2rem;
      &:after{
        content: '';
        display: inline-block;
        width:100% ;
        height:0;
      }
    }
    .f-p2{
      width:11rem;
    }
  }
}
._go{
  width: 95%;
  background: #D3D3D3;
  color:white;
  display: block;
  margin:0 auto;
}
._go1{
  background: $base-fontcolor;
}
.mint-popup-bottom{
  width:100%;
}
.sur-but{
  display: flex;
  display: -webkit-flex;
  width:90%;
  margin:0 auto;
  justify-content: space-between;
  line-height: 2rem;
  font-size: 16px;
  span:last-child{
    color:$base-fontcolor;
  }
}
[v-cloak] {
  display: none !important;
}
.Ptime{
  font-size: 14px;
}
.right{
  position: relative;
  img{
    position: absolute;
    width: 2rem;
    right: .6rem;
    top: 0.5rem;
  }
}
textarea:disabled, input:disabled {
  background: white;
}
.o-top{
  background: white;
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding:1rem;
  img{
    width:6rem;
  }
  section{
    div:first-child{
      font-size: 1.5rem;
      color:$base-fontcolor;
    }
  }
}
.plan-title{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  margin-bottom: .5rem;
  span span{
    color: $base-fontcolor;
  }
}
.plan-title span .active{
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);		/* IE 9 */
  -webkit-transform: rotate(180deg);	/* Safari and Chrome */
  -o-transform: rotate(180deg);		/* Opera */
  -moz-transform: rotate(180deg);		/* Firefox */
}
.plan-title span .iconfont{
  display: inline-block;
  transition: transform 0.5s ease-out;
}
.o-plan{
  background: white;
  padding:1rem;
  margin:1rem 0 0;
  .plan-name{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    .iconfont{
      transition: transform .5s ease-out;
    }
    .active{
      transform: rotate(180deg);
      -ms-transform: rotate(180deg);		/* IE 9 */
      -webkit-transform: rotate(180deg);	/* Safari and Chrome */
      -o-transform: rotate(180deg);		/* Opera */
      -moz-transform: rotate(180deg);		/* Firefox */
    }
  }
}
.info-out{
  background: #F0F0F0;
  section{
    padding:1rem;
    border-bottom:1px solid #D9D9D9;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    span{
      width:45%;
    }
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity   .5s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}
.o-cost{
  padding:1rem;
}
.o-gray{
  color:#999;
}
.cost-title{
  display: inline-block;
  width:6rem;
}
.o-date{
  background: white;
  padding:1rem;
}
.insured{
  width:96%;
  margin:1rem auto;
  .insured-name{
    padding:1rem;
    background: $base-fontcolor;
    color:white;
  }
  li div{
    padding:1rem;
    border-bottom:1px solid  #D9D9D9;
    &:last-child{
      border: none;
    }
  }
}
.guide{
  padding:1rem;
  transition: transform .5s ease-out;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  background: white;
  border-bottom:1px solid $base-backcolor;
  .on{
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);		/* IE 9 */
    -webkit-transform: rotate(180deg);	/* Safari and Chrome */
    -o-transform: rotate(180deg);		/* Opera */
    -moz-transform: rotate(180deg);		/* Firefox */
  }
}
.check{
  padding:1rem;
  display: inline-block;
  span{
    color: $base-fontcolor;
  }
  a{
    color: $base-fontcolor;
  }
}
.o-pay{
  text-align: center;
  background: $base-fontcolor;
  width:100%;
  line-height: 4rem;
  font-size: 1.4rem;
  color:white;
}
.plan-cont{
  background: #F9F9F9;
}
.title-top{
  padding:1rem 0;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  text-indent: 1rem;
  border-bottom:1px solid #ccc;
}
.title-top span:last-child{
  display: inline-block;
  margin-right:1rem;
}
.title-bottom{
  padding:1rem;
}
.title1{
  font-size: 1.4rem;
  color:#000000;
  font-weight: 600;
}
.title2{
  color: #000;
  font-weight: 600;
}
.sur-but{
  line-height: 4rem;
  font-size: 1.5rem;
}
.calculation{
  position: fixed;
  z-index: 20;
  height: 60px;
  width: 60px;
  border-radius: 30px;
  text-align: center;
  line-height: 60px;
  background: rgba(0, 143, 241, 0.9);
  color: white;
  bottom: 7rem;
  right: 2rem;
  font-size: 1.4rem;
}
.loading{
  position: fixed;
  height:100%;
  width:100%;
  z-index: 999;
  background: #F0F0F0;
  top:0;
  left:0;
  .img{
    width:3rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
}
.dis{
  display: none;
}
.grid-out{
  background: white;
  padding:0 1rem;
  display: flex;
  display: -webkit-flex;
  font-size: 1.2rem;
  line-height: 2rem;
  justify-content: space-between;
}
.choose-work{
  line-height: 2rem;
  font-size: 1.4rem;
  text-align: center;
}
.mint-popup.mint-popup-bottom {
  max-height: 60%;
  overflow-y: scroll;
}
.work-out{
  text-indent: 1rem;
  .work-f{
    line-height: 3rem;
    font-size: 1.2rem;
  }
}
.slot{
  width:100%;
}
.bank-out{
  padding-top: .4rem;
  height: 4rem;
  background: white;
  margin-top: .8rem;
  text-indent: 1rem;
  border-bottom:1px solid #E2E2E2;
  div:first-child{
    line-height: 2rem;
    font-weight: 600;
    color: #333333;
    font-size: 1.2rem;;
  }
  div:last-child{
    color: #999999;
  }
}
.return{
  font-size: 1.2rem;
  padding:1rem;
  line-height: 2rem;
  div{
    font-size: 1.4rem;
    font-weight: 600;
    color:#333;
    text-align: center;
    line-height: 4rem;
  }
}
.tips-r span{
  font-weight: 600;
  color:#000;
}
.order-r{
  text-align: center;
  background: #008FF1;
  width: 100%;
  margin-top:2rem;
  line-height: 3rem;
  font-size: 1.2rem;
  color: white !important;
}
input.mint-field-core {
  color: #333;
}